<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <title>购物车</title>
    <style type="text/css">
        h1 {
            text-align: center;
        }

        table {
            margin: 0 auto;
            width: 60%;
            border: 2px solid #aaa;
            border-collapse: collapse;
        }

        table th,
        table td {
            border: 2px solid #aaa;
            padding: 5px;
        }

        th {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <h1>真划算</h1>
    <table id="table1">
        <tr>
            <th>商品</th>
            <th>单价(元)</th>
            <th>颜色</th>
            <th>库存</th>
            <th>好评率</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>外星人电脑</td>
            <td>12000</td>
            <td>黑色</td>
            <td>5</td>
            <td>98%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
            </td>
        </tr>
        <tr>
            <td>独孤九剑</td>
            <td>150</td>
            <td>黑色</td>
            <td>250</td>
            <td>96%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
            </td>
        </tr>
        <tr>
            <td>迪奥口红</td>
            <td>550</td>
            <td>透明</td>
            <td>672</td>
            <td>99%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
            </td>
        </tr>
        <tr>
            <td>蓝牙耳机</td>
            <td>100</td>
            <td>白色</td>
            <td>8937</td>
            <td>95%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
            </td>
        </tr>
        <tr>
            <td>九阳真经</td>
            <td>70</td>
            <td>红色</td>
            <td>482</td>
            <td>100%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcart(this);" />
            </td>
        </tr>
    </table>

    <h1>购物车</h1>
    <table>
        <thead>
            <tr>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="goods">
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">总计</td>
                <td id="total"></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
<script>
    function add_shoppingcart(btn) {
        var $tds = $(btn).parent().siblings();
        var name = $tds.eq(0).html();
        var price = $tds.eq(1).html();
        var stock = $tds.eq(3).html();
        if (stock <= 0) {
            return;
        }

        $tds.eq(3).html(--stock);
        var $trs = $("#goods>tr");
        for (var i = 0; i < $trs.length; i++) {
            var $gtds = $trs.eq(i).children();
            var gName = $gtds.eq(0).html();
            if (name == gName) {
                var num = parseInt($gtds.eq(2).children().eq(1).val());
                $gtds.eq(2).children().eq(1).val(++num);
                $gtds.eq(3).html(price * num);
                return;
            }
        }
        var li ="<tr>" +
                    "<td>" + name + "</td>" +
                    "<td>" + price + "</td>" +
                    "<td align='center'>" +
                    "<input type='button' value='-' onclick='decrease(this);'/> " +
                    "<input type='text' size='3' readonly value='1'/> " +
                    "<input type='button' value='+' onclick='increase(this);'/>" +
                    "</td>" +
                    "<td>" + price + "</td>" +
                    "<td align='center'>" +
                    "<input type='button' value='删除' onclick='del(this);'/>" +
                    "</td>" +
                "</tr>";
            
        $("#goods").append($(li));
        total();
    }

    function findStock(btn) {
        var name = $(btn).parent().siblings().eq(0).html();
        var $trs = $("#table1>tbody>tr:gt(0)");
        for (var i = 0; i < $trs.length; i++) {
            var fName = $trs.eq(i).children().eq(0).html();
            if (name == fName) {
                return $trs.eq(i).children().eq(3);
            }
        }
    }

    function increase(btn) {
        var $stock = findStock(btn);
        var stock = $stock.html();
        if (stock <= 0) {
            return;
        }

        $stock.html(--stock);
        var $td = $(btn).prev();
        var num = parseInt($td.val());
        $td.val(++num);
        var price = parseInt($(btn).parent().prev().html());
        $(btn).parent().next().html(num * price);
        total();
    }

    function decrease(btn) {
        var num = parseInt($(btn).next().val());
        if (num <= 1) {
            return;
        }
        var $stock = findStock(btn);
        var stock = $stock.html();
        $stock.html(++stock);
        $(btn).next().val(--num);
        var price = parseInt($(btn).parent().prev().html());
        $(btn).parent().next().html(price * num);
        total();
    }

    function del(btn) {
        var $stock = findStock(btn);
        var stock = parseInt($stock.html());
        var num = parseInt($(btn).parent().prev().prev().children().eq(1).val());
        $stock.html(num + stock);
        $(btn).parent().parent().remove();
        total();
    }

    function total() {
        var $trs = $("#goods tr");
        var amount = 0;
        for (var i = 0; i < $trs.length; i++) {
            var money = parseInt($trs.eq(i).children().eq(3).html());
            amount += money;
        }
        $("#total").html(amount);
    }
</script>
</html>